<template>
  <div class="record-list">
    <h1>领退记录</h1>
    <table>
      <thead>
      <tr>
        <th>劳务单位</th>
        <th>负责人</th>
        <th>类型</th>
        <th>数量</th>
        <th>签名时间</th>
        <th>项目人员</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="record in records" :key="record.id">
        <td>{{ record.劳务单位 }}</td>
        <td>{{ record.负责人 }}</td>
        <td>{{ record.类型 }}</td>
        <td>{{ record.数量 }}</td>
        <td>{{ record.签名时间 }}</td>
        <td>{{ record.项目人员 }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'RecordList',
  data() {
    return {
      records: [
        {
          id: 1,
          劳务单位: 'XXXX有限公司',
          负责人: '纪广',
          类型: '领用',
          数量: 3,
          签名时间: '2023-11-22 11:40',
          项目人员: '徐夏雨'
        },
        {
          id: 2,
          劳务单位: 'XXXX有限公司',
          负责人: '潘夏彤',
          类型: '退还',
          数量: 4,
          签名时间: '2023-03-16 04:43',
          项目人员: '徐夏雨'
        },
        {
          id: 3,
          劳务单位: 'XXXX有限公司',
          负责人: '李赫',
          类型: '',
          数量: 56,
          签名时间: '2023-06-07 06:00',
          项目人员: '徐夏雨'
        },
        {
          id: 4,
          劳务单位: 'XXXX有限公司',
          负责人: '李赫',
          类型: '',
          数量: 12,
          签名时间: '2023-04-25 13:22',
          项目人员: '徐夏雨'
        },
        {
          id: 5,
          劳务单位: 'XXXX有限公司',
          负责人: '李赫',
          类型: '',
          数量: 2,
          签名时间: '2023-10-05 11:39',
          项目人员: '徐夏雨'
        },
        {
          id: 6,
          劳务单位: 'XXXX有限公司',
          负责人: '李赫',
          类型: '',
          数量: 2,
          签名时间: '2023-03-15 18:47',
          项目人员: '徐夏雨'
        },
        {
          id: 7,
          劳务单位: 'XXXX有限公司',
          负责人: '李赫',
          类型: '',
          数量: 2,
          签名时间: '2023-08-28 23:44',
          项目人员: '徐夏雨'
        }
      ]
    }
  }
}
</script>

<style scoped>
.record-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}
</style>
